<template>
  <el-card>

   <div slot="header" style="width:100%;height:600px;">
     <el-image style="margin:0 auto;width: 100%;" fit="cover" :src="atlasList[0].imgUrl"></el-image>
   </div>

    <el-row :gutter="20">
      <el-col style="margin-bottom: 10px;border:1px solid gray;border-radius: 10px;" :span="6" v-for="item in atlasList"
              :key="item.id">
        <el-image
            style=""
            :src="item.imgUrl"
            :preview-src-list="srcList"
            @click="imgPreview(item.imgUrl)"
        ></el-image>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>




import {reqAtlas} from "@/API";

export default {
  name: 'atlasCom',
  data() {
    return {
      atlasList: [{
        id: 0,
        categoryName: "",
        name: "",
        imgUrl: require("@/assets/img/loginBear.png"),
        description: ""
      }],
      total: 0,
      //  分页数据
      pageNum: 1,
      pageSize: 6,
      srcList:[]
    }
  },
  created() {
    this.init()
  },
  methods: {

    imgPreview(val) {
      this.srcList = []
      this.srcList.push(val)
    },
    init() {
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }
      reqAtlas(params).then((res) => {
        if (res.status === 200) {
          // localStorage.setItem("article-list",JSON.stringify(res.data))
          this.atlasList = res.data.rows
          this.total = parseInt(res.data.total)

        } else {
          this.$message.warning("网络不稳定，请稍后重试！")
          console.log(res)
        }
      })
    }
  }

}
</script>

<style>

</style>
